/**
 * Copyright 2019 [shujiang.yang], Inc. All rights reserved.
 * Email: 314938230@qq.com
**/
define("pages/aqfxry/aqfxry_main", [
        "../../common/componts.js",
        "../../plugins/easyui/jquery-easyui-1.5.1/jquery.easyui.min",
        "../../plugins/easyui/jquery-easyui-1.5.1/easyloader",
        "../../plugins/artTemplate/artTemplate"
    ],
    function(require) {
        /**
         * 画流程图
         */
        var container = document.getElementById("main");
        var graph = new mxGraph(container);
        var parent = graph.getDefaultParent();
        //设置节点解析html标签
        graph.setHtmlLabels(true);
        // 创建默认窗体
        var parent = graph.getDefaultParent();
        // 禁用选择和单元格处理
        graph.setEnabled(false);
        // 容器大小自适应
        graph.setResizeContainer(true);

        //定义一个基础节点样式
        var initStyle = function(_style,style_name,option){
            var _STYLE_ROUNDED=option['STYLE_ROUNDED']!=undefined?option['STYLE_ROUNDED']:true; 	//圆角连线
            var _STYLE_SHAPE=option['STYLE_SHAPE']!=undefined?option['STYLE_SHAPE']:mxConstants.SHAPE_LABEL; 	// 不设置这个属性 背景图片不出来
            var _STYLE_STROKECOLOR=option['STYLE_STROKECOLOR']!=undefined?option['STYLE_STROKECOLOR']:"#f5f5f5"; 	// 边框颜色
            var _STYLE_FILLCOLOR=option['STYLE_FILLCOLOR']!=undefined?option['STYLE_FILLCOLOR']:"#f5f5f5"; 	//节点的背景色
            var _STYLE_FONTCOLOR=option['STYLE_FONTCOLOR']!=undefined?option['STYLE_FONTCOLOR']:"black";	// 字体颜色
            var _STYLE_ALIGN=option['STYLE_ALIGN']!=undefined?option['STYLE_ALIGN']:mxConstants.ALIGN_CENTER; 	// 文字水平方式
            var _STYLE_VERTICAL_ALIGN=option['STYLE_VERTICAL_ALIGN']!=undefined?option['STYLE_VERTICAL_ALIGN']:mxConstants.ALIGN_BOTTOM;	// 文字垂直对齐
            var _STYLE_FONTSIZE=option['STYLE_FONTSIZE']!=undefined?option['STYLE_FONTSIZE']:12;	// 字体大小
            var _STYLE_IMAGE_ALIGN=option['STYLE_IMAGE_ALIGN']!=undefined?option['STYLE_IMAGE_ALIGN']:0;	// 底图水平对齐
            var _STYLE_IMAGE_VERTICAL_ALIGN=option['STYLE_IMAGE_VERTICAL_ALIGN']!=undefined?option['STYLE_IMAGE_VERTICAL_ALIGN']:0;	// 底图垂直对齐
            var _STYLE_IMAGE=option['STYLE_IMAGE']!=undefined?option['STYLE_IMAGE']:"../../img/lcttx.png";	// 图片路径
            var _STYLE_IMAGE_WIDTH=option['STYLE_IMAGE_WIDTH']!=undefined?option['STYLE_IMAGE_WIDTH']:80;	// 背景图片宽
            var _STYLE_IMAGE_HEIGHT=option['STYLE_IMAGE_HEIGHT']!=undefined?option['STYLE_IMAGE_HEIGHT']:80;	// 背景图片高
            var _STYLE_SPACING_TOP=option['STYLE_SPACING_TOP']!=undefined?option['STYLE_SPACING_TOP']:20;	// 上间距设置   // 即使下边定义了全局设置，但这里单独设置上边间距仍单独有效
            var _STYLE_SPACING=option['STYLE_SPACING']!=undefined?option['STYLE_SPACING']:1;	// 四边间距设置

            _style = graph.getStylesheet().getDefaultEdgeStyle();//圆角连线
            _style[mxConstants.STYLE_ROUNDED] = _STYLE_ROUNDED;//圆角连线
            _style = mxUtils.clone(_style);
            _style[mxConstants.STYLE_SHAPE] = _STYLE_SHAPE;  // 不设置这个属性 背景图片不出来
            _style[mxConstants.STYLE_STROKECOLOR] = _STYLE_STROKECOLOR;
            _style[mxConstants.STYLE_FILLCOLOR] = _STYLE_FILLCOLOR;
            _style[mxConstants.STYLE_FONTCOLOR] = _STYLE_FONTCOLOR;
            _style[mxConstants.STYLE_ALIGN] = _STYLE_ALIGN;
            _style[mxConstants.STYLE_VERTICAL_ALIGN] = _STYLE_VERTICAL_ALIGN;
            _style[mxConstants.STYLE_FONTSIZE] = _STYLE_FONTSIZE;
            _style[mxConstants.STYLE_IMAGE_ALIGN] = _STYLE_IMAGE_ALIGN;
            _style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = _STYLE_IMAGE_VERTICAL_ALIGN;
            _style[mxConstants.STYLE_IMAGE] = _STYLE_IMAGE;
            _style[mxConstants.STYLE_IMAGE_WIDTH] = _STYLE_IMAGE_WIDTH;
            _style[mxConstants.STYLE_IMAGE_HEIGHT] = _STYLE_IMAGE_HEIGHT;
            _style[mxConstants.STYLE_SPACING_TOP] = _STYLE_SPACING_TOP;
            _style[mxConstants.STYLE_SPACING] = _STYLE_SPACING;
            graph.getStylesheet().putCellStyle(style_name, _style);
        }


        var drawGraph = function(){

            var style1 = {};
            initStyle(style1,"style1",{});//根据需求可以设置不同的节点样式，要是都一样的话，可以用一个样式了
            var style2 = {};
            initStyle(style2,"style2",{
                STYLE_IMAGE:"../../img/zh.png"//特地将节点2的背景图换一下了
            });

            // 画人物
            //节点1的名称叫做thdj，节点2的名称叫做thcx
            //350, 300, 100, 105 这些是设置节点在页面上的位置
            var v1 = graph.insertVertex(parent, 'thdj', '模块1<font color="red"></font>', 350, 300, 100, 105, "style1");
            var v2 = graph.insertVertex(parent, 'thcx', '模块2<font color="red"></font>', 750, 300, 100, 105, "style2");

            //连线
            //graph.insertEdge(parent, null, '',v1, v2 , "edgeStyle=elbowEdgeStyle;");

            //添加事件
            graph.addListener(mxEvent.CLICK, function(sender, evt) {
                var clickCell = evt.getProperty('cell');
                //graph.setCellStyles(fillColor,black);
                if(clickCell==null){
                    $("#pictureId").css({"display":"none"});
                    return ;
                }else if(clickCell.id==''){//
                    window.location.href='/aqfxry/aqfxry_jbxx_enter.html';
                }else if (clickCell.id==''){//
                    window.location.href=''
                }
            });
            //自适应任何设备屏幕
            function bodyScale(){
                var main = document.getElementById("main"); //获取id="main"
                var devicewidth=document.documentElement.clientWidth;
                var scale=devicewidth/1275;//除去当前流量器分辨率1275
                main.style.zoom=scale;//zoom是设置或检索对象的缩放比例.
            }
            window.onload=window.onresize=function(){
                bodyScale();
            }
        };

        drawGraph();
    }
)
